import { QuestionCircleOutlined } from "@ant-design/icons";
import { Button, Modal, Space, Switch, Table, Tag, Tooltip } from "antd";
import dayjs from "dayjs";
import moment from "moment";
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";

import { useEpics } from "api/Epic";
import { useKanbans } from "api/Kanban";
import { useTasks } from "api/Task";
import {
  useKanbansSearchParams,
  useProjectInUrl,
} from "pages/projectBoard/utils";
import { useEpicSearchParams } from "pages/taskGroup/utils";

//延期列表
const Tables = () => {
  const { data: currentProject } = useProjectInUrl();
  const { data: tasks } = useTasks({ projectId: currentProject?.id });
  const { data: kanbans, isLoading: kanbanIsLoading } = useKanbans(
    useKanbansSearchParams()
  );

  const columns = [
    {
      title: "ID",
      key: "id",
      dataIndex: "id",
      width: 60,
    },
    {
      title: (
        <>
          任务名&nbsp;&nbsp;
          <Tooltip
            overlayStyle={{ width: 250, fontSize: 13 }}
            title={`列表任务为：${currentProject?.name}项目所属看板任务`}
          >
            <QuestionCircleOutlined />
          </Tooltip>
        </>
      ),
      dataIndex: "name",
      key: "name",
      width: 200,
      render: (value, record) => (
        <Link
          style={{ width: 180 }}
          to={`/projects/${record.projectId}/kanban?editingTaskId=${record.id}`}
          key={record.id}
        >
          {value}
        </Link>
      ),
    },
    {
      title: "创建时间",
      key: "created",
      width: 200,
      dataIndex: "created",
      render: (value: any, record: any) => {
        return (
          <span>{dayjs(record?.created).format("YYYY-MM-DD HH:mm:ss")}</span>
        );
      },
    },
    {
      title: "经办人",
      dataIndex: "processorId",
      key: "processorId",
      width: 100,
      render: (value) => {
        if (value == null) {
          return "未选";
        }
        if (value == 1) {
          return "云谦";
        }
        if (value == 2) {
          return "熊天成";
        }
        if (value == 3) {
          return "郑华";
        }
        if (value == 4) {
          return "王文静";
        }
        if (value == 5) {
          return "张霖波";
        }
        if (value == 6) {
          return "高修文";
        }
      },
    },
    {
      title: "类型",
      dataIndex: "typeId",
      key: "typeId",
      width: 100,
      render: (value) => {
        if (value == 1) {
          return (
            <Tag color="green" style={{ fontSize: 13 }}>
              {"task"}
            </Tag>
          );
        }
        if (value == 2) {
          return (
            <Tag color="volcano" style={{ fontSize: 13 }}>
              {"bug"}
            </Tag>
          );
        }
      },
    },
    {
      title: "Tags",
      key: "kanbanId",
      dataIndex: "kanbanId",
      width: 100,
      render: (value) => {
        if (value == 1) {
          return <Tag color="warning">{kanbans?.[0]?.name}</Tag>;
        }
        if (value == 2) {
          return <Tag color="processing">{kanbans?.[1]?.name}</Tag>;
        }
        if (value == 3) {
          return <Tag color="success">{kanbans?.[2]?.name}</Tag>;
        }
        if (value == 4) {
          return <Tag color="#108ee9">{kanbans?.[3]?.name}</Tag>;
        }
        if (value == 5) {
          return <Tag color="#87d068">{kanbans?.[4]?.name}</Tag>;
        }
      },
    },
    {
      title: "计划时间",
      key: "time",
      width: 250,
      dataIndex: "time",
      render: (value: any, record: any) => {
        return (
          <>
            {value ? (
              <>
                <span>{moment(value?.[0]).format("YYYY-MM-DD")}</span>——
                <span>{moment(value?.[1]).format("YYYY-MM-DD")}</span>
              </>
            ) : (
              "-"
            )}
          </>
        );
      },
    },
    {
      title: "备注",
      key: "note",
      dataIndex: "note",
      width: 200,
      render: (value: any, record: any) => {
        return (
          <Tooltip title={value} overlayStyle={{ width: 250, fontSize: 13 }}>
            <div
              style={{
                width: 200,
                overflow: "hidden",
                whiteSpace: "nowrap",
                textOverflow: "ellipsis",
                fontSize: 15,
                color: "red",
              }}
            >
              {record.time ? "任务已延期请尽快完成" : "-"}
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: "是否完成",
      key: "key",
      width: 100,
      render: (text, record) => (
        <Switch
          checkedChildren="已完成"
          unCheckedChildren="未完成"
          defaultChecked={false}
        />
      ),
    },
    {
      title: "操作",
      key: "action",
      width: 100,
      render: (text, record) => (
        <Space size="middle">
          <Link
            style={{ width: 200 }}
            to={`/projects/${record.projectId}/kanban?editingTaskId=${record.id}`}
            key={record.id}
          >
            编辑
          </Link>
        </Space>
      ),
    },
  ];
  return (
    //@ts-ignore
    <Table
      rowKey="id"
      columns={columns}
      dataSource={tasks}
      scroll={{ x: 1200 }}
    />
  );
};

export default Tables;
